<template>
  <div class="app-container">
    <!--    <el-button   class="filter-item marginRB10" type="primary" icon="el-icon-plus" @click="handleCreate()">添加</el-button>-->
    <!--    <el-button class="marginRB10" type="danger" @click="allDel()" plain>批量删除</el-button>-->
    <el-input class="marginRB10" v-model="listQuery.user_code" placeholder="请输入用户编号" style="width:200px;"
              clearable></el-input>
    <el-select filterable v-model="listQuery.status" class="filter-item marginRB10" placeholder='请选择' style="width: 200px;">
      <el-option v-for="item in flagList1" :key="item.key" :label="item.lab" :value="item.key"></el-option>
    </el-select>
    <el-select filterable v-model="listQuery.is_open" class="filter-item marginRB10" placeholder='请选择' style="width: 200px;">
      <el-option v-for="item in flagList2" :key="item.key" :label="item.lab" :value="item.key"></el-option>
    </el-select>
    <el-select filterable v-model="listQuery.is_verify" class="filter-item marginRB10" placeholder='请选择' style="width: 200px;">
      <el-option v-for="item in flagList3" :key="item.key" :label="item.lab" :value="item.key"></el-option>
    </el-select>
    <el-select filterable clearable v-model="listQuery.lisence_id" class="filter-item marginRB10" placeholder='请选择资质' style="width: 200px;">
      <el-option v-for="item in searchList.lisence_list" :key="item.lisence_id" :label="item.lisence_name"
                 :value="item.lisence_id"></el-option>
    </el-select>
    <el-date-picker
      v-model="addTimeList"
      type="datetimerange"
      range-separator="至"
      start-placeholder="申请成功开始时间"
      end-placeholder="申请成功结束时间"
      align="right">
    </el-date-picker>
    <el-date-picker
      v-model="saveTimeList"
      type="datetimerange"
      range-separator="至"
      start-placeholder="最后更新开始时间"
      end-placeholder="最后更新结束时间"
      align="right">
    </el-date-picker>
    <el-button type="primary" @click="searchSubmit" icon="el-icon-search"   class="marginRB10">搜索</el-button>


    <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="user_id" label="用户id"></el-table-column>
      <el-table-column prop="user_code" label="下单人编号"></el-table-column>
      <el-table-column prop="nickname" label="用户昵称"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '使用中' : '' }}
          {{ scope.row.status === 2 ? '申请中' : '' }}
          {{ scope.row.status === 3 ? '审核失败' : '' }}
          <!--          {{scope.row.status === 4?'已删除':''}}-->
        </template>
      </el-table-column>
      <el-table-column prop="is_open" label="是否接单"></el-table-column>
      <el-table-column prop="add_time" label="申请时间"></el-table-column>
      <el-table-column prop="update_time" label="更新时间"></el-table-column>
      <el-table-column prop="avatar" label="头像地址">
        <template slot-scope="scope">
          <el-popover placement="right" max-width="220" trigger="hover">
            <img :src="scope.row.avatar" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.avatar" alt="" style="width: 50px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="lisence_pic" label="资质图片">
        <template slot-scope="scope">
          <el-popover placement="right" max-width="220" trigger="hover">
            <img :src="scope.row.lisence_pic" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.lisence_pic" alt="" style="width: 50px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="voice" label="声音地址">
        <template slot-scope="scope">
          <svg-icon icon-class="stop" @click="videoPause()" v-if="isAmr && isAmrId===scope.row.id"
                    style="font-size: 30px;"/>
          <svg-icon icon-class="play" @click="videoPlay(scope.row.voice, scope.row.id)" v-else
                    style="font-size: 30px;"/>
        </template>
      </el-table-column>
      <el-table-column prop="memo" label="接单说明"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column prop="total_num" label="接单量"></el-table-column>
      <el-table-column prop="score" label="评分"></el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
      <el-table-column prop="max_price" label="可接单的最大单价"></el-table-column>
      <el-table-column prop="duration" label="duration"></el-table-column>
      <el-table-column prop="unique_tag" label="必须的tag_id"></el-table-column>
      <el-table-column prop="is_verify" label="是否技术认证">
        <template slot-scope="scope">
          {{ scope.row.is_verify === 1 ? '不是' : '' }}
          {{ scope.row.is_verify === 2 ? '是' : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="lisence_name" label="资质名字"></el-table-column>

      <el-table-column min-width="220" label="操作">
        <template slot-scope="scope">
          <el-button type="success" size="mini" v-if="scope.row.is_verify === 2" @click="handleUpdate(scope.row, 1)"
                     plain>未技术认证
          </el-button>
          <el-button type="warning" size="mini" v-if="scope.row.is_verify === 1" @click="handleUpdate(scope.row, 2)"
                     plain>已技术认证
          </el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate2(scope.row)" plain>最大单价
          </el-button>
          <!--          <cus-del-btn @ok="handleDelete(scope.row)"></cus-del-btn>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.perPage"
                    @pagination="getList"/>

    <el-dialog v-dialogDrag title="技术认证" :visible.sync="dialogFormVisible" @close="handleDialogClose">
      <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="120px"
               style="width: 400px; margin: 0 auto;">
        <el-form-item label="是否技术认证" prop="is_verify">
          <el-radio v-model="form.is_verify" :label=1>否</el-radio>
          <el-radio v-model="form.is_verify" :label=2>是</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm()">
          确 认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog v-dialogDrag title="最大单价" :visible.sync="dialogFormVisible2" @close="handleDialogClose2">
      <el-form ref="dataForm2" :rules="rules2" :model="form2" label-position="right" label-width="120px"
               style="width: 400px; margin: 0 auto;">
        <el-form-item label="最大单价" prop="price">
          <el-input v-model="form2.price" placeholder="请输入最大单价"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible2 = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm2()">
          确 认
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  saveData,
  deleteData,
  updateData,
  listData,
  searchList,
  isVerify,
  maxPrice
} from '@/api/qualifications/qualificationsUser'
import {DELAY} from "@/data/basic_data";

import {debounce} from "lodash";

let BenzAMRRecorder = require('benz-amr-recorder');
export default {
  data() {
    return {
      listLoading: true,
      total: 0,
      addTimeList: [],
      saveTimeList: [],
      listQuery: {
        page: 1,
        perPage: 10,
        user_code: undefined,
        status: undefined,
        is_open: undefined,
        is_verify: undefined,
        lisence_id: undefined,
        add_start_time: undefined,
        add_end_time: undefined,
        save_start_time: undefined,
        save_end_time: undefined,
      },
      menuList: [],
      searchList: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      flagList1: [{key: undefined, lab: '全部状态'}, {key: '1', lab: '使用中'}, {key: '2', lab: '申请中'}, {
        key: '3',
        lab: '审核失败'
      }],
      flagList2: [{key: undefined, lab: '全部接单状态'}, {key: '1', lab: '是'}, {key: '2', lab: '关闭'}],
      flagList3: [{key: undefined, lab: '全部技术认证状态'}, {key: '1', lab: '未认证'}, {key: '2', lab: '认证'}],
      form: {
        id: undefined,
        is_verify: undefined,
      },
      form2: {
        id: undefined,
        price: undefined,
      },
      amr: undefined,
      isAmr: false,
      isAmrId: 0,
      rules: {
        is_verify: [{required: true, message: '是否技术认证', trigger: 'blur'}],
      },
      rules2: {
        price: [{required: true, message: '请输入最大单价', trigger: 'blur'}],
      }
    }
  },
  created() {
    this.getList()
    this.getSearchList()
  },
  methods: {
    // 点击查询
    searchSubmit(){
        this.listQuery.page = 1;
        this.getList()
    },
    getSearchList() {
      searchList().then(response => {
        this.searchList = response.data
      })
    },
    getList: debounce(function () {

      this.resetTheCorrespondingData()
      this.listLoading = true
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === "" ? undefined : this.listQuery[key]
      }
      listData(this.listQuery).then(response => {
        this.menuList = response.data.list
        this.total = response.data.meta.total;
        this.listLoading = false
      })
    }, DELAY),
    resetTheCorrespondingData() {
      /* 解决elementUI 时间日期等 Picker 清除后， 值设置为null 导致请求报错的问题 */
      if (this.listQuery.save_start_time === null) this.listQuery.save_start_time = undefined
      if (this.listQuery.save_end_time === null) this.listQuery.save_end_time = undefined
      if (this.listQuery.add_start_time === null) this.listQuery.add_start_time = undefined
      if (this.listQuery.add_end_time === null) this.listQuery.add_end_time = undefined
    },
    handleCreate(row) {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate(row, type) {
      let formData = {id: row.id, is_verify: type}
      isVerify(formData).then(response => {
        if (response.code === 200) {
          this.getList()
        }
      })
    },
    handleUpdate2(row) {
      this.form2.id = row.id
      this.form2.price = row.max_price

      this.dialogStatus = 'update'
      this.dialogFormVisible2 = true

      this.form = Object.assign({}, this.form)
    },
    handleDelete(row) {
      let data = {ids: row.id}
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList()
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          });
        }
      })
    },
    allDel() {

      let delNum = []
      this.$refs.dataList.selection.forEach((k) => {
        delNum.push(k.id)
      })
      if (delNum.length === 0) {
        return;
      }
      let data = {ids: delNum.toString()}
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList()
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          });
        }
      })
    },
    submitForm() {
      this.$refs['dataForm'].validate(valid => {
        let formData = new FormData();
        for (let item in this.form) {
          this.form[item] === undefined ? '' : formData.append(item, this.form[item]);
        }
        isVerify(formData).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            });
            this.dialogFormVisible = false
          } else {
            this.$message({
              message: response.message,
              type: 'error'
            });
          }
        })
      })
    },
    submitForm2() {
      this.$refs['dataForm2'].validate(valid => {
        let formData = new FormData();
        for (let item in this.form2) {
          this.form2[item] === undefined ? '' : formData.append(item, this.form2[item]);
        }
        maxPrice(formData).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            });
            this.dialogFormVisible2 = false
          } else {
            this.$message({
              message: response.message,
              type: 'error'
            });
          }
        })
      })
    },
    resetForm() {
      this.form = {
        id: undefined,
        name: undefined,
      }
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
      }
    },
    handleDialogClose2() {
      if (this.$refs['dataForm2']) {
        this.$refs['dataForm2'].clearValidate() // 清除整个表单的校验
      }
    },
    videoPause() {
      this.isAmr = false
      this.amr.stop()
    },
    videoPlay(url, id) {
      this.isAmr = true
      this.isAmrId = id
      let that = this
      if (this.amr !== undefined) {
        this.amr.stop()
      }
      this.amr = new BenzAMRRecorder()
      this.amr.initWithUrl(url).then(function () {
        that.amr.onAutoEnded(function () {
          that.isAmr = false
        });
        that.amr.play()
      })
    },
  },
  watch: {
    addTimeList(value) {
      if (value === null) value = []
      this.listQuery.add_start_time = value[0]
      this.listQuery.add_end_time = value[1]
    },
    saveTimeList(value) {
      if (value === null) value = []
      this.listQuery.save_start_time = value[0]
      this.listQuery.save_end_time = value[1]
    }
  }
}
</script>
